<template>
    <div style="background: #fff;">
      <vTitle page="2" @transferUser="back1" ></vTitle>
      <div class="class-text">
        <div class="class-left" >
          <div class="left-item" v-for="(item,index) in classList" :key="index" :class="index==isChose?'active':''" @click="changeClass(index)"><span>{{item.classification_name}}</span></div>
        </div>
        <div class="class-right">
          <div class="right-item" v-for="(item,index) in classList2" :key="index">
            <div class="item">
              <h4 @click="getGoodsList(item,item.id,2)">{{item.classification_name}}</h4>
              <div class="item-text" v-if="item.children">
                <span @click="getGoodsList(item,item2.id,3)" class="class-item" v-for="(item2,index2) in item.children" :key="index2">{{item2.classification_name}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--<flexbox style="padding-top:200px;">-->
        <!--<flexbox-item><div class="flex-demo" style="background-color: #1AAD19;margin-top-top:20px;">1</div></flexbox-item>-->
        <!--<flexbox-item><div class="flex-demo">-->
          <!--<flexbox orient="vertical">-->
            <!--<flexbox-item><div class="flex-demo" style="background: saddlebrown">1</div></flexbox-item>-->
            <!--<flexbox-item><div class="flex-demo" style="background: aqua">2</div></flexbox-item>-->
          <!--</flexbox>-->
        <!--</div></flexbox-item>-->
      <!--</flexbox>-->
        <!--<flexbox :gutter="0" style="overflow: hidden;z-index: 20;">-->
          <!--<flexbox-item :span="3">-->
            <!--<div class="flex-demo goods-class">-->
              <!--<ul>-->
                <!--<li v-if="isShow" v-for="(item,index) in classList" :key="index" :class="index==isChose?'active':''" @click="changeClass(index)">{{item.classification_name}}</li>-->
              <!--</ul>-->
            <!--</div>-->
          <!--</flexbox-item>-->
          <!--<flexbox-item>-->
            <!--<div class="flex-demo goods-text">-->
              <!--<ul>-->
                <!--<li class="goods-item" v-for="(item,index) in classList2" :key="index">-->
                  <!--<h5 @click="getGoodsList(item,item.id,2)">{{item.classification_name}}</h5>-->
                  <!--<div>-->
                    <!--<span @click="getGoodsList(item,item2.id,3)" class="class-item" v-for="(item2,index2) in item.children" :key="index2">{{item2.classification_name}}</span>-->
                  <!--</div>-->
                <!--</li>-->
              <!--</ul>-->
            <!--</div>-->
          <!--</flexbox-item>-->
        <!--</flexbox>-->
      <div v-transfer-dom>
        <popup v-model="isList" height="100%"  style="background: #fbf9fe;">
          <vList v-if="isList" v-bind:item="item" v-bind:id="id" v-bind:classId="classId" @transferUser="listBack"></vList>
        </popup>
      </div>
      <toast v-model="showPositionValue" type="text" :time="1000" is-show-mask :text="toastMsg" :position="position"></toast>
    </div>
</template>

<script>
  import { XHeader, Flexbox, FlexboxItem, Grid, GridItem, Toast, Popup } from 'vux';
  import vTitle from './Title'
  import vList from './Goods-list'
  export default {
    name: "",
    components: {
      XHeader, Flexbox, FlexboxItem, Grid, GridItem, Toast, vTitle, Popup, vList
    },
    data () {
      return {
        searchText:'',
        isShow:false,
        isClass:false,
        isChose:0,
        classList:[],
        classList2:[],
        isList:false,
        showPositionValue: false, // Toast提示
        position: 'default',
        toastMsg: '',
      }
    },
    created(){
      this.getGoodsClass()
      // $(".child-view").css({overflow:'hidden'})
    },
    methods:{
      // 信息提示
      msg(str){
        this.showPositionValue = true;
        this.position = 'middle';
        this.toastMsg = (str);
      },
      // 获取商品分类
      getGoodsClass(){
        this.$vux.loading.show({
          text: 'Loading'
        });
        this.config1.post('/purchasers/app/goodsclassification/findAll', {}).then(res=>{
          if(res.data.code==0){
            this.$vux.loading.hide();
            this.classList = this.public.arrayToTreeList(res.data.goodsClassification, 'id', 'pid')
            this.classList2 = this.classList[this.isChose].children
            this.isShow = true
          }else{
            this.msg(res.data.message);
          }
        }).catch(err=>{
          this.$vux.loading.hide();
          this.msg('网络错误');
        })
      },
      // 选择分类
      changeClass(index){
        this.isChose = index
        this.classList2 = this.classList[this.isChose].children
      },
      // 查看商品列表
      getGoodsList(item,id,classId){
        this.isList = true
        this.item = item
        this.id = id
        this.classId = classId
      },
      listBack(msg){
        this.isList = msg
      },
      back1(msg){
        this.$router.push('/project1/view1/goods');
      },
    onItemClick(){
        console.log(1)
      }
    }
  }
</script>


<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  ul li{
    list-style-type: none;
  }
  .class-text{
    position: relative;
    top:45px;
    font-size: 0.8rem;
    .class-left{
      width: 25%;
      position: fixed;
      top:45px;
      bottom: 0;
      left:0;
      background: #f1f1f1;
      .left-item{
        text-align: center;
        padding:1rem 0;
        span{
          display: inline-block;
          line-height:20px;
          box-sizing:border-box;
          width: 100%;
          border-left:0.2rem solid #f1f1f1
        }
      }
      .left-item.active{
        background:#fff;
        span{
          border-color:#33bb99;
        }
      }
    }
    .class-right{
      width: 75%;
      background: #fff;
      position: absolute;
      overflow-y: scroll;
      right: 0;
      padding-bottom: 1rem;
      .right-item{
        width: 95%;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 0 8px #bdbdbd ;
        margin: 1rem auto 0;
        .item{
          padding:0.5rem 0.8rem;
          h4{
            line-height:2rem;
            padding-left:0.5rem;
          }
          .item-text{
            border-top:1px solid #33bb99;
            line-height:2rem;
            span{
              padding:0 0.5rem;
            }
          }
        }
      }
    }
  }
</style>
